<template>
	<div class="checkphone" :class="display">
		<group>
			<flexbox :gutter="0">
		      	<flexbox-item :span="3/5">
		      		<x-input v-model="form.code" placeholder="验证码"></x-input>
		      	</flexbox-item>
		      	<flexbox-item :span="2/5">
		      		<SendPhoneCode ref="sendPhoneCode" :callback="getKey" :sendurl="sendurl" :phone="form.phone" cookiename="register" :params="form"></SendPhoneCode>
		      	</flexbox-item>
		    </flexbox>
		</group>
		<div class="btn">
			<x-button @click.native="last">上一步</x-button>
			<x-button @click.native="check">{{btnText}}</x-button>
		</div>
	</div>
</template>
<script>
	import { XInput, Group, Flexbox,FlexboxItem,XButton} from 'vux'

	import Axios from 'touch/config/axios';
	import SendPhoneCode from 'touch/components/common/send-phone-code';

	import Va from 'async-validator';

	const formRule = {
	  	code : [
	  		{type : "string" , required: true , message : '请填写验证码'},
	  	],
	};

	export default {
		props :{
	        btnText :  {
	            type: String,
	            required : true,
	        },
	        display :  {
	            type: String,
	            default : '',
	            required : true,
	        },
	        callback :  {
	            type: Function,
	            required : true,
	        },
	        prev :  {
	            type: Function,
	            required : true,
	        },
	        sendurl : {
	        	type: String,
	            default : '',
	            required : true,	
	        }
		},
		components:{
			XInput,
		    Group,
		    Flexbox,
			FlexboxItem,
			XButton,
			SendPhoneCode,
        },
        data (){
	        return{
	            form :{
	            	phone : '',
	            	phonekey : '',
	            	code : '',
	            	key : '',
	            },
	            btn :{
	            	disabled : false,
	            	loading : false,
	            },
	            formBool : true,
	        }
	    },
	    methods: {
	    	//上一步
	    	last(){
	    		this.prev();
	    	},
	    	//验证数据
			check(){
				this.formValidate();
				if(this.formBool==false) return false;
				if(this.form.key==''){
					this.$vux.toast.show({type : 'text', text: '请先点击<br>获取验证码'});return false;
				}
				this.callback(this.form);
			},
			//数据验证
			formValidate(){
				this.formBool = true;
				new Va(formRule).validate(this.form, (errors, fields) => {
				  	if(errors) {
				  		this.$vux.toast.show({type : 'text', text: errors[0].message});
				  		this.formBool = false;
				  	}
				});
			},
			getKey(key){
				this.form.key = key;
			}
	    },
	    created :function(){
	    },
	}
</script>
<style>
	.checkphone .icon{padding-right: 15px;}
	.checkphone .btn{margin-top: 15px;}
	.checkphone.show{display: initial;}
	.checkphone.hide{display: none;}
</style>